<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">

	<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

	<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
	<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
	<%--全选全不选--%>
	<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
	<!--  PAGINATION plugin -->
	<link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
	<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="jquery/myself/quanxuan.js"></script>

<script type="text/javascript">

	$(function(){

		//当容器加载完成，对容器调用工具函数
		$(".mydate").datetimepicker({
			language:'zh-CN',//语言
			format:'yyyy-mm-dd',//日期格式
			minView:'month',//日期选择器上最小能选择的日期的视图
			initialDate:new Date(),// 日历的初始化显示日期，此处默认初始化当前系统时间
			autoclose:true,//选择日期之后，是否自动关闭日历
			todayBtn:true,//是否显示当前日期的按钮
			clearBtn:true,//是否显示清空按钮
		});

		
	});
	$(function () {
		selectClues(1,10);
		selectCluesBtn();
		creatClue();
		editClue();
		saveCreateClueBtn();
		edit_update_btn();
		deleteBtn();
	})
	function deleteBtn() {
		$("#deleteBtn").on("click",function () {
			var ids = $("#tBody input:checked");
			if(ids.size() ==0)
			{
				alert("请至少选择一条数据！");
				return;
			}
			var idStr ="";
			$.each(ids,function(index,id) {
				idStr+= "id="+$(id).val()+"&";
			});
			idStr=idStr.substring(0,idStr.length-1);
			$.ajax({
				url:"deleteBtn",
				type:"post",
				data:idStr,
				success:function (data) {
					if(data.code == 1)
					{
						alert("删除成功！");
						selectClues(1,10);
					}else {
						alert(data.message);
					}
				}
			});

		});

	}
	function edit_update_btn() {
		$("#edit_update_btn").on("click",function () {
			var owner =$.trim($("#edit-clueOwner").val());
			if(owner == "")
			{
				alert("所用者不能为空！");
				return;
			}
			var company = $.trim($("#edit-company").val());
			if(company == "")
			{
				alert("公司不能为空！");
				return;
			}

			var fullName = $.trim($("#edit-surname").val());
			if(fullName == "")
			{
				alert("姓名不能为空！");
				return;
			}

			var id = $("#tBody input:checked").val();
			var appellation = $.trim($("#edit-call").val());
			var job = $.trim($("#edit-job").val());
			var email = $.trim($("#edit-email").val());
			var phone = $.trim($("#edit-phone").val());
			var website =$.trim($("#edit-website").val());
			var mphone =$.trim($("#edit-mphone").val());
			var state =$.trim($("#edit-state").val());
			var source =$.trim($("#edit-source").val());
			var description =$.trim($("#edit-description").val());
			var contactSummary = $.trim($("#edit-contactSummary").val());
			var nextContactTime =$.trim($("#edit-nextContactTime").val());
			var address = $.trim($("#edit-address").val());
			$.ajax({
				url:"edit_update_btn",
				type:"post",
				data:{
					id:id,
					owner:owner,
					company:company,
					fullName:fullName,
					appellation:appellation,
					job:job,
					email:email,
					phone:phone,
					website:website,
					mphone:mphone,
					state:state,
					source:source,
					description:description,
					contactSummary:contactSummary,
					nextContactTime:nextContactTime,
					address:address
				},
				success:function (data) {
					if(data.code == 1)
					{
						alert("更新成功！");
						$("#edit_Form_reset")[0].reset();
						$("#editClueModal").modal("hide");
						selectClues(1,10);
					}else {
						alert(data.message);
					}
				}
			});
		});
	}
	function saveCreateClueBtn() {
		$("#saveCreateClueBtn").on("click",function () {
			var owner =$.trim($("#create-clueOwner").val());
			if(owner == "")
			{
				alert("所用者不能为空！");
				return;
			}
			var company = $.trim($("#create-company").val());
			if(company == "")
			{
				alert("公司不能为空！");
				return;
			}

			var fullName = $.trim($("#create-fullName").val());
			if(fullName == "")
			{
				alert("姓名不能为空！");
				return;
			}
			var appellation = $.trim($("#create-appellation").val());
			var job = $.trim($("#create-job").val());
			var email = $.trim($("#create-email").val());
			var phone = $.trim($("#create-phone").val());
			var website =$.trim($("#create-website").val());
			var mphone =$.trim($("#create-mphone").val());
			var state =$.trim($("#create-state").val());
			var source =$.trim($("#create-source").val());
			var description =$.trim($("#create-description").val());
			var contactSummary = $.trim($("#create-contactSummary").val());
			var nextContactTime =$.trim($("#create-nextContactTime").val());
			var address = $.trim($("#create-address").val());
			$.ajax({
				url:"saveCreateClueBtn",
				type:"post",
				data:{
					owner:owner,
					company:company,
					fullName:fullName,
					appellation:appellation,
					job:job,
					email:email,
					phone:phone,
					website:website,
					mphone:mphone,
					state:state,
					source:source,
					description:description,
					contactSummary:contactSummary,
					nextContactTime:nextContactTime,
					address:address
				},
				success:function (data) {
					if(data.code ==1)
					{
						alert("添加成功!");
						$("#create_Form_reset")[0].reset();
						$("#createClueModal").modal("hide");
						selectClues(1,10);
					}else {
						alert(data.message);
					}
				}
			});
		});
	}
	function editClue() {
		$("#editBtn").on("click",function () {
			var checked = $("#tBody input:checked");
			var checkedVal = $("#tBody input:checked").val();
			//alert(checkedVal)
			if(checked.size() != 1)
			{
				alert("只能同时编辑一条数据！");
				return;
			}
			$.ajax({
				url:"workbench/clue/editClues?id="+checkedVal,
				type:"get",
				success:function (data) {
					var str = "<option value=\"\">-------请选择-----</option>";
					$.each(data.userList,function (index,user) {
						str+="<option value=\""+user.id+"\">"+user.name+"</option>";
					});
					$("#edit-clueOwner").html(str);

					var str = "";
					$.each(data.appellationList,function (index,appellation) {
						str+="<option value=\""+appellation.id+"\">"+appellation.value+"</option>";
					});
					$("#edit-call").html(str);

					var str = "";
					$.each(data.clueStateList,function (index,clueState) {
						str+="<option value=\""+clueState.id+"\">"+clueState.value+"</option>";
					});
					$("#edit-state").html(str);

					var str = "";
					$.each(data.sourceList,function (index,source) {
						str+="<option value=\""+source.id+"\">"+source.value+"</option>";
					});
					$("#edit-source").html(str);
					/*--------------------------------------*/
					$("#edit-clueOwner").val(data.clue.owner);
					$("#edit-company").val(data.clue.company);
					$("#edit-call").val(data.clue.appellation);
					$("#edit-surname").val(data.clue.fullName);
					$("#edit-job").val(data.clue.job);
					$("#edit-email").val(data.clue.email);
					$("#edit-phone").val(data.clue.phone);
					$("#edit-website").val(data.clue.website);
					$("#edit-mphone").val(data.clue.mphone);
					$("#edit-source").val(data.clue.source);
					$("#edit-status").val(data.clue.state);
					$("#edit-describe").html(data.clue.description);
					$("#edit-contactSummary").html(data.clue.contactSummary);
					$("#edit-nextContactTime").val(data.clue.nextContactTime);
					$("#edit-contactSummary").html(data.clue.contactSummary);
				}
			});
			$("#editClueModal").modal("show");
		});

	}
	function creatClue() {
		$("#creatBtn").on("click",function () {
			$.ajax({
				url:"workbench/clue/createClues",
				type:"get",
				success:function (data) {
					var str = "<option value=\"\">-------请选择-----</option>";
					$.each(data.userList,function (index,user) {
						str+="<option value=\""+user.id+"\">"+user.name+"</option>";
					});
					$("#create-clueOwner").html(str);

					var str = "";
					$.each(data.appellationList,function (index,appellation) {
						str+="<option value=\""+appellation.id+"\">"+appellation.value+"</option>";
					});
					$("#create-appellation").html(str);

					var str = "";
					$.each(data.clueStateList,function (index,clueState) {
						str+="<option value=\""+clueState.id+"\">"+clueState.value+"</option>";
					});
					$("#create-state").html(str);

					var str = "";
					$.each(data.sourceList,function (index,source) {
						str+="<option value=\""+source.id+"\">"+source.value+"</option>";
					});
					$("#create-source").html(str);
				}
			});
			$("#createClueModal").modal("show");
		});

	}
	function selectCluesBtn() {
		$("#selectCluesBtn").on("click",function () {
			selectClues(1,10);
		})
	}
	function selectClues(pageNum,pageSize) {
		var owner = $.trim($("#owner").val());
		var company = $.trim($("#company").val());
		var phone = $.trim($("#phone").val());
		var source = $.trim($("#source").val());
		var fullName = $.trim($("#fullName").val());
		var mphone = $.trim($("#mphone").val());
		var state = $.trim($("#state").val());
		$.ajax({
			url:"workbench/clue/selectClues",
			type:"get",
			data:{
				owner:owner,
				company:company,
				phone:phone,
				source:source,
				fullName:fullName,
				mphone:mphone,
				state:state,
				pageSize:pageSize,
				pageNum:pageNum
			},
			success:function (data) {
				var clueStr = "";
				$.each(data.dataList,function (index,clue) {
					clueStr+="<tr>";
					clueStr+="<td><input type=\"checkbox\"  value='"+clue.id+"'/></td>";
					clueStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='workbench/clue/detailClue.do?id="+clue.id+"';\">"+clue.owner+""+clue.appellation+"</a></td>";
					clueStr+="<td>"+clue.company+"</td>";
					clueStr+="<td>"+clue.phone+"</td>";
					clueStr+="<td>"+clue.mphone+"</td>";
					clueStr+="<td>"+clue.source+"</td>";
					clueStr+="<td>"+clue.fullName+"</td>";
					clueStr+="<td>"+clue.state+"</td>";
					clueStr+="</tr>";
				});
				$("#tBody").html(clueStr);
				var pages = data.total % pageSize == 0 ? data.total/pageSize:data.total/pageSize+1;
				$("#demo_pag1").bs_pagination({
					currentPage:pageNum,//当前页

					rowsPerPage:pageSize,//每页显示条数
					totalRows:data.total,//总条数
					totalPages: pages,//总页数

					visiblePageLinks:5,//显示的翻页卡片数

					showGoToPage:true,//是否显示"跳转到第几页"
					showRowsPerPage:true,//是否显示"每页显示条数"
					showRowsInfo:true,//是否显示"记录的信息"

					//每次切换页号都会自动触发此函数，函数能够返回切换之后的页号和每页显示条数
					onChangePage: function(e,pageObj) { // returns page_num and rows_per_page after a link has clicked
						/*alert(pageObj.currentPage);
						alert(pageObj.rowsPerPage);*/
						selectClues(1,10);
					}
				});
			}
		});
	}

</script>
</head>
<body>

	<!-- 创建线索的模态窗口 -->
	<div class="modal fade" id="createClueModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 90%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">创建线索</h4>
				</div>
				<div class="modal-body" id="create_modelBody">
					<form class="form-horizontal" role="form" id="create_Form_reset">
					
						<div class="form-group" >
							<label for="create-clueOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-clueOwner">
								  <c:forEach items="${userList}" var="u">
										<option value="${u.id}">${u.name}</option>
								  </c:forEach>
								</select>
							</div>
							<label for="create-company" class="col-sm-2 control-label">公司<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-company">
							</div>
						</div>
						
						<div class="form-group">
							<label for="create-appellation" class="col-sm-2 control-label">称呼</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-appellation">
								  <option></option>
								  <c:forEach items="${appellationList}" var="a">
										<option value="${a.id}">${a.value}</option>
								  </c:forEach>
								</select>
							</div>
							<label for="create-fullName" class="col-sm-2 control-label">姓名<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-fullName">
							</div>
						</div>
						
						<div class="form-group">
							<label for="create-job" class="col-sm-2 control-label">职位</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-job">
							</div>
							<label for="create-email" class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-email">
							</div>
						</div>
						
						<div class="form-group">
							<label for="create-phone" class="col-sm-2 control-label">公司座机</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-phone">
							</div>
							<label for="create-website" class="col-sm-2 control-label">公司网站</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-website">
							</div>
						</div>
						
						<div class="form-group">
							<label for="create-mphone" class="col-sm-2 control-label">手机</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-mphone">
							</div>
							<label for="create-state" class="col-sm-2 control-label">线索状态</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-state">
								  <option></option>
								  <c:forEach items="${clueStateList}" var="cs">
									  <option value="${cs.id}">${cs.value}</option>
								  </c:forEach>
								</select>
							</div>
						</div>
						
						<div class="form-group">
							<label for="create-source" class="col-sm-2 control-label">线索来源</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-source">
								  <option></option>
								  <c:forEach items="${sourceList}" var="s">
										<option value="${s.id}">${s.value}</option>
								  </c:forEach>
								</select>
							</div>
						</div>
						

						<div class="form-group">
							<label for="create-description" class="col-sm-2 control-label">线索描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-description"></textarea>
							</div>
						</div>
						
						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>
						
						<div style="position: relative;top: 15px;">
							<div class="form-group">
								<label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
								<div class="col-sm-10" style="width: 81%;">
									<textarea class="form-control" rows="3" id="create-contactSummary"></textarea>
								</div>
							</div>
							<div class="form-group">
								<label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
								<div class="col-sm-10" style="width: 300px;">
									<input type="text" class="form-control mydate" id="create-nextContactTime" readonly>
								</div>
							</div>
						</div>
						
						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>
						
						<div style="position: relative;top: 20px;">
							<div class="form-group">
                                <label for="create-address" class="col-sm-2 control-label">详细地址</label>
                                <div class="col-sm-10" style="width: 81%;">
                                    <textarea class="form-control" rows="1" id="create-address"></textarea>
                                </div>
							</div>
						</div>
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" id="saveCreateClueBtn" class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改线索的模态窗口 -->
	<div class="modal fade" id="editClueModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 90%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">修改线索</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form" id="edit_Form_reset">
					
						<div class="form-group">
							<label for="edit-clueOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-clueOwner">
									<c:forEach items="${userList}" var="u">
										<option value="${u.id}">${u.name}</option>
									</c:forEach>
								</select>
							</div>
							<label for="edit-company" class="col-sm-2 control-label">公司<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-company" value="动力节点">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-call" class="col-sm-2 control-label">称呼</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-call">
								  <option></option>
									<c:forEach items="${appellationList}" var="a">
										<option value="${a.id}">${a.value}</option>
									</c:forEach>
								</select>
							</div>
							<label for="edit-surname" class="col-sm-2 control-label">姓名<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-surname" value="李四">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-job" class="col-sm-2 control-label">职位</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-job" value="CTO">
							</div>
							<label for="edit-email" class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-email" value="lisi@bjpowernode.com">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-phone" class="col-sm-2 control-label">公司座机</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-phone" value="010-84846003">
							</div>
							<label for="edit-website" class="col-sm-2 control-label">公司网站</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-website" value="http://www.bjpowernode.com">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-mphone" class="col-sm-2 control-label">手机</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-mphone" value="12345678901">
							</div>
							<label for="edit-status" class="col-sm-2 control-label">线索状态</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-status">
								  <option></option>
									<c:forEach items="${clueStateList}" var="cs">
										<option value="${cs.id}">${cs.value}</option>
									</c:forEach>
								</select>
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-source" class="col-sm-2 control-label">线索来源</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-source">
								  <option></option>
									<c:forEach items="${sourceList}" var="s">
										<option value="${s.id}">${s.value}</option>
									</c:forEach>
								</select>
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-describe">这是一条线索的描述信息</textarea>
							</div>
						</div>
						
						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>
						
						<div style="position: relative;top: 15px;">
							<div class="form-group">
								<label for="edit-contactSummary" class="col-sm-2 control-label">联系纪要</label>
								<div class="col-sm-10" style="width: 81%;">
									<textarea class="form-control" rows="3" id="edit-contactSummary">这个线索即将被转换</textarea>
								</div>
							</div>
							<div class="form-group">
								<label for="edit-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
								<div class="col-sm-10" style="width: 300px;">
									<input type="text" class="form-control" id="edit-nextContactTime" value="2017-05-01">
								</div>
							</div>
						</div>
						
						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>

                        <div style="position: relative;top: 20px;">
                            <div class="form-group">
                                <label for="edit-address" class="col-sm-2 control-label">详细地址</label>
                                <div class="col-sm-10" style="width: 81%;">
                                    <textarea class="form-control" rows="1" id="edit-address">北京大兴区大族企业湾</textarea>
                                </div>
                            </div>
                        </div>
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" id="edit_update_btn" class="btn btn-primary" >更新</button>
				</div>
			</div>
		</div>
	</div>
	
	
	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>线索列表</h3>
			</div>
		</div>
	</div>
	
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
	
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="owner">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">公司</div>
				      <input class="form-control" type="text" id="company">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">公司座机</div>
				      <input class="form-control" type="text" id="phone">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">线索来源</div>
					  <select class="form-control" id="source">
					  	  <option></option>
						  <c:forEach items="${sourceList}" var="s">
							  <option value="${s.id}">${s.value}</option>
						  </c:forEach>
					  </select>
				    </div>
				  </div>
				  
				  <br>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="fullName">
				    </div>
				  </div>
				  
				  
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">手机</div>
				      <input class="form-control" type="text" id="mphone">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">线索状态</div>
					  <select class="form-control" id="state">
					  	<option></option>
						  <c:forEach items="${clueStateList}" var="cs">
							  <option value="${cs.id}">${cs.value}</option>
						  </c:forEach>
					  </select>
				    </div>
				  </div>

				  <button type="button"  id="selectCluesBtn" class="btn btn-default">查询</button>
				  <button type="reset">清除</button>
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 40px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" id="creatBtn" class="btn btn-primary" data-toggle="modal" ><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" id="editBtn" class="btn btn-default" data-toggle="modal" ><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" id="deleteBtn" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>
				
				
			</div>
			<div style="position: relative;top: 50px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox"  id="chkedAll"/></td>
							<td>名称</td>
							<td>公司</td>
							<td>公司座机</td>
							<td>手机</td>
							<td>线索来源</td>
							<td>所有者</td>
							<td>线索状态</td>
						</tr>
					</thead>
					<tbody id="tBody">
						<tr>
							<td><input type="checkbox" /></td>
							<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='workbench/clue/detailClue.do?id=8cfb85063ab3462bb1f426a65a5f332d';">张三先生</a></td>
							<td>动力节点</td>
							<td>010-84846003</td>
							<td>12345678901</td>
							<td>广告</td>
							<td>zhangsan</td>
							<td>已联系</td>
						</tr>
                        <tr class="active">
                            <td><input type="checkbox" /></td>
                            <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">李四先生</a></td>
                            <td>动力节点</td>
                            <td>010-84846003</td>
                            <td>12345678901</td>
                            <td>广告</td>
                            <td>zhangsan</td>
                            <td>已联系</td>
                        </tr>
					</tbody>

				</table>
			</div>
			<div style="height: 50px; position: relative;top: 60px;">
				<%--<div>
					<button type="button" class="btn btn-default" style="cursor: default;">共<b>50</b>条记录</button>
				</div>
				<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
					<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
					<div class="btn-group">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							10
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu">
							<li><a href="#">20</a></li>
							<li><a href="#">30</a></li>
						</ul>
					</div>
					<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
				</div>
				<div style="position: relative;top: -88px; left: 285px;">
					<nav>
						<ul class="pagination">
							<li class="disabled"><a href="#">首页</a></li>
							<li class="disabled"><a href="#">上一页</a></li>
							<li class="active"><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">下一页</a></li>
							<li class="disabled"><a href="#">末页</a></li>
						</ul>
					</nav>
				</div>--%>
					<div id="demo_pag1"></div>
			</div>
		</div>

	</div>
</body>
</html>